<template>
  <div>
    <el-card class="box-card" style="margin-top: 30px">
      <div slot="header" class="d-flex align-items-center">
        <span style="margin-right: 80px"><i class="el-icon-menu"></i>分类</span>
      </div>
      <div v-for="(type,key) in latestType" :key="key">
        <div style="justify-content: space-between;display: flex">
          <el-link @click="getBlogsByTypeId()"   :underline="false" style="display: table;font-weight: bold;font-size: 15px;width: 80px; position: relative;">
              {{type.typeName}}
          </el-link>
          <span>{{type.number}}</span>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="d-flex align-items-center">
        <span style="margin-right: 80px"><i class="el-icon-collection-tag"></i>标签</span>
      </div>
      <div v-for="(tag,key) in latestTag" :key="key">
        <div style="justify-content: space-between;display: flex">
          <el-link @click="getBlogsByTagId()" :underline="false" style="display: table;font-weight: bold;font-size: 15px;width: 80px">
              {{tag.tag}}
          </el-link>
          <span>{{tag.number}}</span>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="d-flex align-items-center">
        <span style="margin-right: 80px"><i class="el-icon-date"></i>最新文章</span>
      </div>
      <div v-for="(blog,key) in latestBlog" :key="key">
        <div style="margin-bottom: 5px">
          <span style="font-size: 12px;color: #7a7a7a">{{blog.createTime}}</span>
          <router-link :to="'/article/'+blog.id" tag="span" style="display: table;font-weight: bold;font-size: 16px;color: black">
            {{blog.title}}
          </router-link>
          <span style="font-size: 11px;color: #7a7a7a">{{blog.typeName}}</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      latestTag: [],
      latestType: [],
      latestBlog: []
    }
  },
  methods: {
    getLatestBlog () {
       var that = this;
       axios({ 
        method: "GET",
        url: '/blog/getLatestBlog',
        }).then(function (res) {
        that.latestBlog = res.data.data;
        }).catch(error => {
        console.log(error)
      });
    },
    getLatestTag () {
      var that = this;
       axios({ 
        method: "GET",
        url: '/type/getLatestTags',
        }).then(function (res) {
         // console.log(res.data)
        that.latestTag = res.data.data;
        }).catch(error => {
        console.log(error)
      });
    },
    getLatestType () {
      var that = this;
       axios({ 
        method: "GET",
        url: '/type/getLatestTypes',
        }).then(function (res) {
         // console.log(res.data)
        that.latestType = res.data.data;
        }).catch(error => {
        console.log(error)
      });
    },
    convertBlog (blogList) {
      var i = 0
      for (; i < blogList.length; i++) {
        var d = new Date(blogList[i].createTime)
        blogList[i].createTime = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
      }
    },
    getBlogsByTypeId(){
      this.$router.push({ path: `/type` })
    },
    getBlogsByTagId(){
      this.$router.push({ path: `/tag` })
    }
  },
  mounted () {
    this.getLatestBlog()
    this.getLatestTag()
    this.getLatestType()
  }
}
</script>

<style lang="less" scoped>
.box-card{
  width: 300px;
  margin-right: 60px;
}
.box-card .item:hover {
  color: #409EFF;
  cursor: pointer;
}
.box-card span {
  font-weight: bold;
}
.card-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
</style>
